{include file="public/_header" /}
<div class="x-body">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">

                <form class="layui-form layui-col-md12 x-so" action="{:url('admin/recharge/index')}" method="get">

                    <div class="layui-form-item">
                        <label class="layui-form-label">关键词</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" value="{$keyword}" placeholder="请输入关键词" class="layui-input">
                        </div>

                        <label class="layui-form-label">范围选择</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" placeholder="开始日" name="start_time" id="start" value="{$start_time}">

                        </div>
                        <div class="layui-input-inline">
                        <input class="layui-input" placeholder="截止日" name="end_time" id="end" value="{$end_time}">
                        </div>
                        <label class="layui-form-label">城市</label>
                        <div class="layui-input-inline">
                            <select name="city" lay-search="">
                                <option value="">请选择</option>
                                {foreach $city_arr as $key=>$value}
                                <option value="{$value.city}" {if $city==$value.city } selected {/if}>{$value.cityname}</option>
                                {/foreach}

                            </select>
                        </div>
                        <label class="layui-form-label">充值金额</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" placeholder="开始金额" name="start_recharge"
                                   value="{$start_recharge}">
                        </div>
                        <div class="layui-input-inline">
                            <input class="layui-input" placeholder="截止金额" name="end_recharge"
                                   value="{$end_recharge}">
                        </div>
                        <button class="layui-btn layui-btn-primary">搜索</button>
                        <a class="layui-btn layui-btn-small" class="layui-btn layui-btn layui-btn-mini "
                           style="float: right"
                           href="javascript:location.replace(location.href);" title="刷新">
                            <i class="layui-icon" style="line-height:30px">ဂ</i>
                        </a>
                    </div>



                </form>
                <hr>
                <form action="" method="post" class="ajax-form">

                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th style="width: 15px;"><input type="checkbox" class="check-all"></th>
                            <th style="width: 30px;">ID</th>
                            <th>城市</th>
                            <th>职业</th>
                            <th>姓名</th>
                            <th>电话</th>
                            <th>充值方式</th>
                            <th>充值金额</th>
                            <th>充值日期</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="recharge_list" id="vo"}
                        <tr>
                            <td><input type="checkbox" name="ids[]" value="{$vo.id}"></td>
                            <td>{$vo.id}</td>
                            <th>{$vo.city_name}</th>
                            <th>{$vo.job_three_name}</th>
                            <th>{$vo.true_name}</th>
                            <th>{$vo.phone}</th>
                            <th>{$vo.channel}</th>
                            <th>{$vo.money}</th>
                            <th>{$vo.create_time}</th>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                    第{$recharge_list->currentPage()}页&nbsp;&nbsp;共{$recharge_list->total()}条
                </form>
                <div class="pagination news_paginate"> {$recharge_list->render()}</div>
            </div>
        </div>
    </div>

    {if($Think.session.auth_id == 1)}
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>充值表格</legend>
    </fieldset>

    <div class="layui-form">
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <tbody>
            <tr>
                <td>充值金额:{$recharge}</td>
            </tr>
            </tbody>
        </table>

        <ul class="row-day">

            <div class="layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">日期范围</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="time" id="test6" placeholder=" - ">
                        </div>
                        <div class="layui-input-inline">
                            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                        </div>
                    </div>
                </div>
            </div>

        </ul>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 600px;height:400px;"></div>

    </div>

</div>

{/if}

</div>


{include file="public/_footer" /}

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //日期时间选择器
        laydate.render({
            elem: '#start'
            ,type: 'datetime'
        });

        laydate.render({
            elem: '#end'
            ,type: 'datetime'
        });
    });


    $(function () {
        layui.use(['form', 'laydate'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            //日期范围
            laydate.render({
                elem: '#test6'
                , range: true,
                format: 'yyyy/MM/dd'
            });
            var start = getNowFormatDate(8);
            var end = getNowFormatDate(0);

            $.ajax({
                url: "/api/index/getRecharge",
                type: "get",
                data: {start_time: start, end_time: end},
                dataType: "json",
                success: function (data) {
                    caculate(data)
                }
            });

            //监听提交
            form.on('submit(demo1)', function (data) {
                var data = data.field;
                var start = data.time.split("-")[0].replace(/\//g, "-")
                var end = data.time.split("-")[1].replace(/\//g, "-");
                $.ajax({
                    url: "/api/index/getRecharge",
                    type: "get",
                    data: {start_time: start, end_time: end},
                    dataType: "json",
                    success: function (data) {
                        caculate(data)
                    }
                });
            });
        });
    });
    function getNowFormatDate(n) {
        var now = new Date();
        var date = new Date(now.getTime() - n * 24 * 3600 * 1000);
        var year = date.getFullYear();
        var month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1);
        var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
        var date = year + "-" + month + "-" + day;
        return date;
    }
</script>

